<!-- [BE-NAV] Background Navigation -->
<div id="sp_bgnavi_box" class="sp_bgnavi_box">
    <!-- Navigation top (Index shortcut icons & Save button) -->
    <div id="panel_top" class="panel_top">
        <div class="font-i18blu box_title_outer">
            <div class="box_title">Index</div>
        </div>
        <div class="index_icon_box">
            <a id="index_icon1" class="opec-03 index_icon" title="My Profile"><img src="../assets/book/editor/images/micons_profile.png" /></a>
            <a id="index_icon2" class="opec-09" title="Background"><img src="../assets/book/editor/images/micons_bg.png" /></a>
            <a id="index_icon3" class="opec-03 index_icon" title="Items"><img src="../assets/book/editor/images/micons_widget.png" /></a>
            <a id="index_icon4" class="opec-03 index_icon" title="Documents"><img src="../assets/book/editor/images/micons_docs.png" /></a>
            <a id="index_icon4" class="opec-03 index_icon" title="Settings"><img src="../assets/book/editor/images/micons_setting.png" /></a>
        </div>

        <!-- Save button -->
        <div id="bg_save_box" class="bg_save_box">
            <a href="" id="bg_save" class="bg_save" title="Save & Exit"><img src="../assets/book/images/icons_png/bg_save_off.png" /></a>
        </div>
    </div>
    <!-- //Navigation top -->

    <div class="gab-h10"></div> <!-- Gab -->

    <!-- Panel selector -->
    <div id="bg_item_selector" class="border-1s-ldws border-r5 bgc-00 bg_item_selector">
        <div class="font-i16blk selector_title">
            <div class="box_title">Panel Selector</div>
            <img id="all_reset" class="all_reset" src="../assets/book/editor/images/btn_all_reset.png" title="All of items clear" />
        </div>

        <!-- Selector icons
        ★★★ TIP : 현재 예제를 위해 아래의 2부분(btn_item2, btn_item3)만 특정 이미지로 배경 설정이 되어있음. -->
        <div class="item_select_box">
            <div class="item_select_inner">
                <div id="btn_item1" class="btn_item_all btn_item_gray bshadow-22503i btn_item1" style="background-image:url(../assets/book/editor/images/icon_item1.png)" title="Recurrence Patterns"><img id="icon_item_off1" class="icon_item_off" src="../assets/book/editor/images/icon_item_off.png" /></div>
                <div id="btn_item2" class="btn_item_all btn_item_color bshadow-22503i btn_item2" style="background-image:url(../assets/book/editor/images/icon_item2.png)" title="Wallpaper"><img id="icon_item_off2" class="icon_item_off" src="../assets/book/editor/images/icon_item_off.png" /></div>
                <div id="btn_item3" class="btn_item_all btn_item_gray bshadow-22503i btn_item3" style="background-image:url(../assets/book/editor/images/icon_item3.png)" title="Main Image"><img id="icon_item_off3" class="icon_item_off" src="../assets/book/editor/images/icon_item_off.png" /></div>
                <div id="btn_item4" class="btn_item_all btn_item_gray bshadow-22503i btn_item4" title="Envelop Colors" style="background-color:rgba(255, 200, 0, .5)"><img id="icon_item_off4" class="icon_item_off" src="../assets/book/editor/images/icon_item_off.png" /></div>
                <div id="btn_item5" class="btn_item_all btn_item_gray bshadow-22503i btn_item5" style="background-color:rgba(0,0,0,0.2);background-image:url(../assets/book/editor/images/icon_item5.png)" title="Envelop Patterns"><img id="icon_item_off5" class="icon_item_off" src="../assets/book/editor/images/icon_item_off.png" /></div>
                <div id="btn_item6" class="btn_item_all btn_item_gray bshadow-22503i btn_item6" style="background-image:url(../assets/book/editor/images/icon_item6.png)" title="Special Effects"><img id="icon_item_off6" class="icon_item_off" src="../assets/book/editor/images/icon_item_off.png" /></div>
            </div>
        </div>
        <!-- //Selector icons -->

        <!-- Checkbox for item show, hide  -->
        <div class="btn_onoff_box">
            <span class="border-r3 bshadow-01304 iblock onoff_btn">
                <input id="hide_item1" name="hide_item1" type="checkbox" checked="checked" class="input-cb3" alt="Hide this item" />
            </span>
            <span class="border-r3 bshadow-01304 iblock onoff_btn">
                <input id="hide_item2" name="hide_item2" type="checkbox" checked="checked" class="input-cb3" alt="Hide this item" />
            </span>
            <span class="border-r3 bshadow-01304 iblock onoff_btn">
                <input id="hide_item3" name="hide_item3" type="checkbox" checked="checked" class="input-cb3" alt="Hide this item" />
            </span>
            <span class="border-r3 bshadow-01304 iblock onoff_btn">
                <input id="hide_item4" name="hide_item4" type="checkbox" checked="checked" class="input-cb3" alt="Hide this item" />
            </span>
            <span class="border-r3 bshadow-01304 iblock onoff_btn">
                <input id="hide_item5" name="hide_item5" type="checkbox" checked="checked" class="input-cb3" alt="Hide this item" />
            </span>
            <span class="border-r3 bshadow-01304 iblock onoff_btn">
                <input id="hide_item6" name="hide_item6" type="checkbox" checked="checked" class="input-cb3" alt="Hide this item" />
            </span>
            <span class="stretch"> <!-- Checkbox auto gab -->
                <span class="stretch_inner_l"></span>
                <span class="stretch_inner_c font-n11dg">Show & Hide Selector</span>
                <span class="stretch_inner_r"></span>
            </span>
        </div>
        <!-- //Checkbox for item show, hide  -->

        <!-- Background fullscreen selector -->
        <div class="block-both select_fs_box">
            <div class="line-a1"></div> <!-- Deco line -->
            <div class="flblock bg_fullscreen_box">
                <div class="gab-v25"></div> <!-- Gab -->
                <div class="gab-v1"></div> <!-- Gab -->
                <div class="border-r3 bshadow-01304 iblock onoff_btn btn_fs_cb">
                    <input id="bg_fs_cb" name="bg_fs_cb" type="checkbox" class="input-cb3" alt="Fullscreen Background" />
                </div>
                <div class="iblock font-n11dg select_fs_title">Fullscreen<br />Background</div>
            </div>

            <div class="flblock bg_fs_icon">
                <div class="gab-v10"></div> <!-- Gab -->
                <div class="iblock">
                    <img class="select_bg_img" src="../assets/book/editor/images/icon_bs_guide1.png" />
                </div>
            </div>

            <div class="flblock bg_guide_box">
                <div class="gab-v10"></div> <!-- Gab -->
                <div class="border-r3 bshadow-01304 iblock onoff_btn">
                    <input id="bg_guide" name="bg_guide" type="checkbox" class="input-cb3" title="Guide line ON/OFF" />
                </div>
                <div class="iblock font-n11dg select_fs_title">Guide<br />Line</div>
                <div class="gab-v1"></div> <!-- Gab -->
                <div class="iblock">
                    <img class="select_bg_img" src="../assets/book/editor/images/icon_bs_guide2.png" />
                </div>
            </div>
            <div class="gab-h35"></div> <!-- Gab -->
        </div>
        <!-- //Background fullscreen selector -->
    </div>
    <!-- //Panel selector -->

    <div class="box_sh_icon1">
        <!-- More button -->
        <img class="arrow_tgo2" src="../assets/book/images/icons_png/arrow-right2o.png" title="More" />
        <img class="arrow_tgc" src="../assets/book/images/icons_png/arrow-left2.png" title="Less" />
        <img class="arrow_tgo1" src="../assets/book/images/icons_png/arrow-right2.png" title="More" />
    </div>

    <div class="box_sh_icon2">
        <!-- More button -->
        <img class="arrow_tgo2" src="../assets/book/images/icons_png/arrow-right2o.png" title="More" />
        <img class="arrow_tgc" src="../assets/book/images/icons_png/arrow-left2.png" title="Less" />
        <img class="arrow_tgo1" src="../assets/book/images/icons_png/arrow-right2.png" title="More" />
    </div>
</div>
<!-- //[BE-NAV] Background Navigation -->

